<template>
<div class="map-tootip map-tootip-left" :class="{'map-tootip-left-show': leftShow}">
  <div class="bg"></div>
  <span class="arrow-btn" @click="leftShow = !leftShow">
    <i :class="leftShow ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'"></i>
  </span>
  <div class="content">
    <div class="title-tab">
      <div v-for="m in tabDatas" :key="m.name" @click="changeCom(m)" class="tab-btn" :class="{actived: m.name === nowCom}">{{ m.label }}</div>
    </div>
    <div class="tab-pane">
      <treeLayer v-show="nowCom === 'treeLayer'"></treeLayer>
      <addLayer v-show="nowCom === 'addLayer'"></addLayer>
      <searchLayer v-show="nowCom === 'searchLayer'"></searchLayer>
    </div>
  </div>
</div>
</template>

<script>
import treeLayer from './treeLayer.vue'
import addLayer from './addLayer.vue'
import searchLayer from './searchLayer.vue'
import { sessionStorage } from '@/deps/utils'
export default {
  props: ['allLayerData'],
  components: {
    treeLayer, addLayer, searchLayer
  },
  mounted() {
  },
  data() {
    return {
      leftShow: true,
      nowCom: 'treeLayer',
      tabDatas: [
        {
          name: 'treeLayer',
          label: '图层'
        },
        {
          name: 'addLayer',
          label: '新增'
        },
        {
          name: 'searchLayer',
          label: '资源搜索'
        }
      ]
    }
  },
  methods: {
    changeCom(data) {
      if (data.name === 'addLayer') {
        const proData = sessionStorage('projectInfo')
        if (!proData) {
          this.$message({
            message: '请先在工具栏中选择项目',
            type: 'warning'
          })
          return
        }
      }
      this.nowCom = data.name
      this.$bus.$emit('CHANGE_LEFT_TAB', data)
    }
  }
}
</script>
<style lang="scss">
.map-tootip-left {
  .content {
    display: flex;
    flex-direction: column;
    height: 100%;
    .title-tab {
      display: flex;
      .tab-btn {
        padding: 8px 16px 16px;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: var(--color-primary);
        }
        &.actived {
          color: var(--color-primary);
          border-bottom: 2px solid var(--color-primary);
        }
      }
    }
    .tab-pane { 
      flex: auto;
      overflow: auto;
    }
  }
}
</style>